<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序猿老爸带娃编程的小小课堂 - javy21</title>
    <style>
        /* 整体样式 */
        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            margin: 0;
            padding: 20px;
            min-height: 100vh;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        /* 上半部分：教学区域 */
        .teaching-section {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 30px;
            border-left: 5px solid #4a4af4;
        }

        .teaching-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .teaching-header h1 {
            color: #4a4af4;
            font-size: 2.2em;
            margin: 0;
        }

        .teaching-content {
            line-height: 1.8;
        }

        .code-block {
            background: #2d2d2d;
            color: #00ff00;
            padding: 15px;
            border-radius: 8px;
            margin: 15px 0;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            white-space: pre-wrap;
            line-height: 1.5;
        }

        .concept-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }

        .concept-card {
            background: white;
            padding: 15px;
            border-radius: 10px;
            border: 2px solid #e9ecef;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .concept-card h4 {
            color: #4a4af4;
            margin-top: 0;
        }

        .encouragement {
            background: linear-gradient(45deg, #ffd93d, #ff6b6b);
            color: white;
            padding: 20px;
            border-radius: 15px;
            text-align: center;
            margin-top: 25px;
            font-weight: bold;
        }

        .author-info {
            text-align: center;
            margin-top: 15px;
            font-size: 0.9em;
            color: #666;
        }

        /* 下半部分：操作区域 */
        .operation-section {
            background: white;
            border-radius: 15px;
            padding: 25px;
            border: 2px solid #e9ecef;
        }

        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 50px;
            font-size: 1.1em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
            color: white;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255,107,107,0.4);
        }

        .btn-secondary {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            color: white;
        }

        .btn-secondary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(78,205,196,0.4);
        }

        .btn:disabled {
            opacity: 0.6;
            transform: none;
            cursor: not-allowed;
        }

        .terminal {
            background: #2d2d2d;
            border-radius: 15px;
            padding: 20px;
            height: 400px;
            overflow-y: auto;
            font-family: 'Courier New', monospace;
            color: #00ff00;
            border: 3px solid #4a4af4;
        }

        .output-line {
            margin: 10px 0;
            line-height: 1.6;
        }

        .prompt { color: #4ecdc4; font-weight: bold; }
        .complete { color: #ffd93d; font-weight: bold; }
        .error { color: #ff6b6b; }
        .success { color: #4ecdc4; }
        .info { color: #4a90e2; }

        .footer {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 0.9em;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .teaching-header h1 {
                font-size: 1.8em;
            }

            .concept-grid {
                grid-template-columns: 1fr;
            }

            .btn {
                padding: 12px 25px;
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <!-- 上半部分：教学区域 -->
    <div class="teaching-section">
        <div class="teaching-header">
            <h1>程序猿老爸带娃编程的小小课堂</h1>
            <p>第1课：九九乘法表的编程实现</p>
            <div class="author-info">
                作者: javy21 | 邮箱: javy21@126.com | 原创教学案例
            </div>
        </div>

        <div class="teaching-content">
            <h3>🎯 本节课学习目标</h3>
            <p>理解循环嵌套的概念，掌握用代码生成九九乘法表的方法，培养计算思维。</p>

            <h3>🧠 编程思维解析</h3>
            <div class="code-block">
                // 编程就像做菜，要有清晰的步骤：
                //
                // 1. 准备食材（初始化变量）
                //    - 定义存储结果的列表
                //    - 准备循环计数器
                //
                // 2. 按顺序操作（循环执行）
                //    - 外层循环控制行数
                //    - 内层循环控制每行的公式数量
                //
                // 3. 装盘上菜（输出结果）
                //    - 格式化输出乘法公式
                //    - 逐行显示最终结果
            </div>

            <h3>🔍 核心代码解读</h3>
            <div class="code-block">
                # 外层循环：控制行数 (1到9)
                for i in range(1, 10):

                # 内层循环：控制每行的列数 (1到i)
                for j in range(1, i + 1):

                # 输出乘法公式
                print(f"{j}×{i}={i*j}")

                # 换行，准备输出下一行
                print()
            </div>

            <h3>💡 重要概念理解</h3>
            <div class="concept-grid">
                <div class="concept-card">
                    <h4>🔁 循环结构</h4>
                    <p>重复执行某段代码，就像每天都要吃饭睡觉一样自然</p>
                </div>
                <div class="concept-card">
                    <h4>🔄 嵌套循环</h4>
                    <p>循环里面还有循环，就像年份包含月份，月份包含天数</p>
                </div>
                <div class="concept-card">
                    <h4>📦 变量使用</h4>
                    <p>存储数据的容器，就像书包里的课本，随用随取</p>
                </div>
                <div class="concept-card">
                    <h4>🎨 格式化输出</h4>
                    <p>让结果更美观，就像把作业写得工工整整</p>
                </div>
            </div>

            <h3>⚠️ 注意事项</h3>
            <ul>
                <li><strong>循环边界</strong>：range(1, 10) 是从1到9，不是1到10！</li>
                <li><strong>缩进重要</strong>：Python靠缩进来区分代码块，就像作文的段落</li>
                <li><strong>变量初始化</strong>：使用前要先赋值，不能突然出现</li>
            </ul>

            <div class="encouragement">
                🌟 给宝贝女儿的话：<br>
                "编程就像学骑自行车，开始可能会摔跤，但一旦掌握就再也忘不了。<br>
                记住：每一个程序员都曾经是零基础，关键是保持好奇心和耐心！<br>
                老爸相信你一定可以成为优秀的小程序员！🚀"
            </div>
        </div>
    </div>

    <!-- 下半部分：操作区域 -->
    <div class="operation-section">
        <h3>🖥️ 实践操作区</h3>

        <div class="buttons">
            <button class="btn btn-primary" onclick="executeMultiplication()" id="multiplicationBtn">
                🎯 执行九九乘法表
            </button>
            <button class="btn btn-secondary" onclick="clearScreen()" id="clearBtn">
                🧹 清空屏幕
            </button>
        </div>

        <div class="terminal" id="terminal">
            <div class="output-line prompt">👋 你好！我是编程小助手</div>
            <div class="output-line">欢迎来到编程学习世界！</div>
            <div class="output-line">点击"执行九九乘法表"按钮，</div>
            <div class="output-line">我会一步一步展示乘法表的生成过程哦～</div>
        </div>

        <div class="footer">
            <p>💡 小提示：观察每一行乘法是如何逐渐增加的，这就是循环的魔力！</p>
        </div>
    </div>
</div>

<script>
    const terminal = document.getElementById('terminal');
    const multiplicationBtn = document.getElementById('multiplicationBtn');
    const clearBtn = document.getElementById('clearBtn');
    let isExecuting = false;

    function scrollToBottom() {
        terminal.scrollTop = terminal.scrollHeight;
    }

    function addOutputLine(content, className = 'output-line') {
        const line = document.createElement('div');
        line.className = className;
        line.innerHTML = content;
        terminal.appendChild(line);
        scrollToBottom();
    }

    function clearScreen() {
        terminal.innerHTML = '';
        addOutputLine('🧹 屏幕已清空，可以开始新的学习啦！', 'prompt');
    }

    function executeMultiplication() {
        if (isExecuting) return;

        isExecuting = true;
        multiplicationBtn.disabled = true;
        clearBtn.disabled = true;

        addOutputLine('🚀 开始执行九九乘法表...', 'prompt');
        addOutputLine('⏳ 请稍等，正在计算中...', 'info');

        const eventSource = new EventSource('/api/execute?command=multiplication');

        eventSource.onmessage = function(event) {
            const data = JSON.parse(event.data);

            if (data.type === 'output') {
                addOutputLine(data.content);
            } else if (data.type === 'complete') {
                addOutputLine('🎉 太棒了！乘法表生成完成！', 'complete');
                addOutputLine('💡 你发现乘法的规律了吗？', 'info');
                eventSource.close();
                isExecuting = false;
                multiplicationBtn.disabled = false;
                clearBtn.disabled = false;

                // 添加鼓励动画
                setTimeout(() => {
                    addOutputLine('🌟 你真是一个编程小天才！', 'success');
                }, 1000);
            }
        };

        eventSource.onerror = function() {
            addOutputLine('❌ 哎呀，出现了一点小问题...', 'error');
            eventSource.close();
            isExecuting = false;
            multiplicationBtn.disabled = false;
            clearBtn.disabled = false;
        };
    }

    // 初始提示
    setTimeout(() => {
        addOutputLine('🐢 编程就像搭积木，一步一步来最有趣！', 'info');
    }, 2000);
</script>
</body>
</html>